<template>
    <div>
        <div class="head">
            <div class="logo_head">
                <img src="@/static/logo.jpg" alt="">
            </div>
            <div class="head_bottom">
                <div>

                </div>
                <div>

                </div>
                <div>

                </div>
                <div>

                </div>
                <div>

                </div>
            </div>
        </div>
        <div class="content">
            <div class="list">
                <div class="left">
                    <img src="@/static/user/phone.png" alt="">
                    <input type="text" placeholder="请输入注册手机号" v-model="obj.loginPhone">
                </div>
                <div class="right">

                </div>
            </div>
            <div class="list">
                <div class="left">
                    <img src="@/static/user/password.png" alt="">
                    <input type="password" placeholder="请输入密码" v-model="obj.loginPassword">
                </div>
                <div class="right">

                </div>
            </div>
            <div class="list">
                <div class="left">
                    <img src="@/static/user/password.png" alt="">
                    <input type="password" placeholder="请重复密码" v-model="obj.loginRePassword">
                </div>
                <div class="right">

                </div>
            </div>
            <div class="list">
                <div class="left">
                    <img src="@/static/user/ercode.png" alt="">
                    <input type="text" placeholder="请输入图片验证码" v-model="obj.loginCode">
                </div>
                <div class="right" v-html="svgHtml">

                </div>
            </div>
            <div class="submit">
                <button @click="submit()">注册</button>
            </div>
            <div class="to_msg">
                <router-link to="/Login">已有账号？去登录。</router-link>
            </div>
        </div>
    </div>
</template>
<script>
// 导入 api文件
import {
    // 解构出来getCode
    getCode,
    // 解构出来register
    register
} from '@/api/index'
// 相当于 from '@api/index.js'
export default {
    data() {
        return {
            // svg图片
            svgHtml: '',
            // 验证码的字符
            code: '',
            // 注册需要提交的信息
            obj: {
                // 登录用的手机号
                loginPhone: '',
                // 登录用的密码
                loginPassword: '',
                // 登录确认密码
                loginRePassword: '',
                // 验证码
                loginCode: ''
            }
        }
    },
    // 在创建后的生命周期请求 验证码的接口
    created() {
        // 调用获取验证码接口
        this.getCodeHtml();
    },
    // 事件
    methods: {
        // 获取验证码
        getCodeHtml() {
            // 调用获取验证码的api
            getCode({
                width:'100',
                height:'40'
            }).then(res => {
                // 打印响应的内容
                // console.log(res.data)
                // 给svg数据赋值
                this.svgHtml = res.data.data
                // 给验证码的字符赋值
                this.code = res.data.text;
                /* 
                    headers 
                        后端响应头
                        content-length  响应内容的长度
                        content-type   响应内容的类型
                    data
                        后端响应的数据
                */
            })
        },
        // 注册方法
        submit(){
            // 打印要提交的数据
            // console.log(this.obj)
            // 验证手机号
            if(!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.obj.loginPhone)){
                // console.log('手机号不合法');
                // 使用view-ui-plus的全局提示方法  错误方法提示v
                this.$Message.error('手机号不合法')
                return
            }
            // 验证密码
            if(this.obj.loginPassword.length < 6){
                // console.log('密码最少6位');
                this.$Message.error('手机号不合法')
                return
            }
            // 两次密码输入是否一致
            if(this.obj.loginPassword != this.obj.loginRePassword){
                // console.log('两次密码输入不一致');
                this.$Message.error('两次密码输入不一致')
                return
            }
            // 判断验证码
            if(this.code.toLowerCase() != this.obj.loginCode.toLowerCase()){
                // console.log('验证码输入错误');
                this.$Message.error('验证码输入错误')
                return
            }

            // 注册接口，把前端的数据发送给后端
            register(this.obj).then(res => {
                // console.log(res.data);
                // 如果code 值为1 证明 注册成功
                if(res.data.code == 1){
                    // 弹出 成功的提示框
                    this.$Message.success(res.data.msg)
                    // 跳转到登录页面
                    this.$router.push({
                        path: '/Login'
                    })
                }else{
                    this.$Message.error(res.data.msg)
                }
            })
            // console.log(this.obj);
        }
    }
}
</script>
<style lang="scss" scoped>
.head {
    width: 100%;
    height: 35vh;
    text-align: center;
    background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(29, 70, 245));
    overflow: hidden;

    .logo_head {
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
    }

    .head_bottom {
        width: 100%;
        height: 40%;
        position: relative;
        z-index: 1;

        div {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            left: 40%;
            bottom: -50%;

            &:nth-child(1) {
                width: 30%;
                height: 100%;
                left: -15%;
            }

            &:nth-child(2) {
                width: 40%;
                height: 110px;
                left: 10%;
            }

            &:nth-child(3) {
                width: 25%;
                height: 120px;
                bottom: -55%;
            }

            &:nth-child(4) {
                width: 50%;
                height: 90px;
            }

            &:nth-child(5) {
                width: 30%;
                height: 60px;
                left: 80%;
                bottom: -35%;
            }
        }
    }
}

.content {
    width: 90%;
    padding: 5vh 5%;
    height: 45vh;
    position: relative;
    top: -1px;
    background-color: #fff;

    .list {
        width: 100%;
        border-bottom: 0.5px solid #eee;
        height: 7vh;
        line-height: 7vh;
        display: flex;

        .left {
            width: 96%;
            padding: 0 2%;
            display: flex;

            img {
                height: 3.5vh;
                position: relative;
                top: 1.5vh;
                margin-right: 10px;
            }
        }

        .right {
            padding-top: calc((7vh - 40px)/2);
        }

        input {
            height: 5vh;
            outline: none;
            border: none;
            font-size: 15px;
            margin-top: 1vh;
        }
    }

    .submit {
        button {
            width: 84%;
            height: 40px;
            margin-left: 8%;
            margin-top: 20px;
            border: none;
            outline: none;
            border-radius: 20px;
            font-size: 17px;
            background-color: rgb(50, 134, 255);
            color: #fff;
            box-shadow: 0 0 2px 0px rgb(29, 70, 245);
            transition: all 0.2s;

            &:active {
                box-shadow: 0 0 2px 0px rgb(1, 18, 90);
                background-color: rgb(29, 70, 245);
            }
        }
    }

    .to_msg {
        text-align: center;
        font-size: 14px;
        color: rgb(29, 70, 245);
        margin-top: 35px;
    }
}</style>